<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <%@include file="include/header.jsp" %>
    <title>菜单维护</title>
    <link rel="stylesheet" href="static/ztree/zTreeStyle.css">
    <script type="text/javascript" src="static/ztree/jquery.ztree.all-3.5.min.js"></script>
    <style>
        /* 调整一下每个菜单项之间的间距 */
        #zTree li {
            margin-top: 5px !important;
        }
        /* 调整一下菜单名称和图标之间的间隔 */
        #zTree .glyphicon {
            padding-right: 5px;
        }
        /* 设置添加，编辑，删除三个按钮之间的间距 */
        .m-addBtn, .m-editBtn, .m-rmBtn {
            margin-left:10px;padding-top:0px;
        }
    </style>
</head>

<body>

<%@include file="include/nav.jsp" %>

<div class="container-fluid">
    <div class="row">
        <%@include file="include/sidebar.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <!-- 在此处绘制页面 -->
            <div class="panel panel-default">
                <%-- 顶部标题 --%>
                <div class="panel-heading">
                    <i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
                    <div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal">
                        <i class="glyphicon glyphicon-question-sign"></i>
                    </div>
                </div>
                <%-- 绘制菜单树 --%>
                <div class="panel-body">
                    <ul id="zTree" class="ztree"></ul>
                </div>
            </div>
        </div>
    </div>

    <span id="btnGrouptreeDemo_2">
        <a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" title="修改权限信息">
            &nbsp;&nbsp;<i class="fa fa-fw fa-edit rbg"></i>
        </a>
        <a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;">
            &nbsp;&nbsp;<i class="fa fa-fw fa-plus rbg"></i>
        </a>
        <a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;">
            &nbsp;&nbsp;<i class="fa fa-fw fa-times rbg"></i>
        </a>
    </span>

    <%-- 添加的dialog --%>
    <div id="addMenuDialog" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">添加菜单</h4>
                </div>
                <form>
                    <div class="modal-body">
                        菜单名称：<input type="text" name="name" /> <br />
                        URL地址：<input type="text" name="url" /> <br />
                        <i class="glyphicon glyphicon-th-list"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-th-list" />&nbsp;
                        <i class="glyphicon glyphicon-dashboard"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-dashboard" /> &nbsp;
                        <i class="glyphicon glyphicon glyphicon-tasks"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon glyphicon-tasks" /> &nbsp;
                        <i class="glyphicon glyphicon-user"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-user" /> &nbsp;
                        <i class="glyphicon glyphicon-king"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-king" /> &nbsp;
                        <i class="glyphicon glyphicon-lock"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-lock" /> &nbsp;
                        <i class="glyphicon glyphicon-ok"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-ok" /> &nbsp;
                        <i class="glyphicon glyphicon-check"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-check" /> &nbsp;
                        <i class="glyphicon glyphicon-th-large"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-th-large" /> <br />
                        <i class="glyphicon glyphicon-picture"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-picture" /> &nbsp;
                        <i class="glyphicon glyphicon-equalizer"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-equalizer" /> &nbsp;
                        <i class="glyphicon glyphicon-random"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-random" /> &nbsp;
                        <i class="glyphicon glyphicon-hdd"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-hdd" /> &nbsp;
                        <i class="glyphicon glyphicon-comment"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-comment" /> &nbsp;
                        <i class="glyphicon glyphicon-list"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-list" /> &nbsp;
                        <i class="glyphicon glyphicon-tags"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-tags" /> &nbsp;
                        <i class="glyphicon glyphicon-list-alt"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-list-alt" /> &nbsp;
                        <br />
                    </div>
                    <div class="modal-footer">
                        <button id="addMenuBtn" type="button" class="btn btn-default">
                            <i class="glyphicon glyphicon-plus"></i> 添加
                        </button>
                        <button id="menuResetBtn" type="reset" class="btn btn-primary">
                            <i class="glyphicon glyphicon-refresh"></i> 重置
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <%-- 编辑的dialog --%>
    <div id="editMenuDialog" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">尚筹网系统弹窗</h4>
                </div>
                <form>
                    <div class="modal-body">
                        请输入节点名称：<input type="text" name="name" /><br />
                        请输入URL地址：<input type="text" name="url" /><br />
                        <i class="glyphicon glyphicon-th-list"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-th-list" />&nbsp;
                        <i class="glyphicon glyphicon-dashboard"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-dashboard" /> &nbsp;
                        <i class="glyphicon glyphicon glyphicon-tasks"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon glyphicon-tasks" /> &nbsp;
                        <i class="glyphicon glyphicon-user"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-user" /> &nbsp;
                        <i class="glyphicon glyphicon-king"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-king" /> &nbsp;
                        <i class="glyphicon glyphicon-lock"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-lock" /> &nbsp;
                        <i class="glyphicon glyphicon-ok"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-ok" /> &nbsp;
                        <i class="glyphicon glyphicon-check"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-check" /> &nbsp;
                        <i class="glyphicon glyphicon-th-large"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-th-large" /> <br />
                        <i class="glyphicon glyphicon-picture"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-picture" /> &nbsp;
                        <i class="glyphicon glyphicon-equalizer"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-equalizer" /> &nbsp;
                        <i class="glyphicon glyphicon-random"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-random" /> &nbsp;
                        <i class="glyphicon glyphicon-hdd"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-hdd" /> &nbsp;
                        <i class="glyphicon glyphicon-comment"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-comment" /> &nbsp;
                        <i class="glyphicon glyphicon-list"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-list" /> &nbsp;
                        <i class="glyphicon glyphicon-tags"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-tags" /> &nbsp;
                        <i class="glyphicon glyphicon-list-alt"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-list-alt" /> &nbsp;
                        <br />
                    </div>
                    <div class="modal-footer">
                        <button id="menuEditBtn" type="button" class="btn btn-default">
                            <i class="glyphicon glyphicon-edit"></i> 更新
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>
</body>
<script>
    // zTree的配置对象
    let setting = {};
    // zTree的数据列表
    let nodes = {};
    // window.onload or created
    $(() => {
        initTree();
        // $("#addMenuDialog").modal("show");
    });

    // 发起请求
    function req(type, url, data = null) {
        let promise = new Promise((resolve, reject) => {
            $.ajax({
                type: type,
                url: url,
                data: data,
                dataType: "json",
                success(res) {
                    // 成功返回就回调，否则提示异常信息，异常信息由服务端提供
                    if (res.code === 100) {
                        resolve(res);
                    } else {
                        layer.msg(res.msg);
                        reject(res);
                    }
                },
                error(err) {
                    // 走到这里就说明请求失败了，执行失败逻辑
                    layer.msg("请求服务端失败！状态码为：" + err.status + "，详细信息为：" + err.statusText);
                    reject(err);
                }
            });
        });
        return promise;
    }

    // 初始化zTree菜单树
    function initTree() {
        setting = {
            view: {
                addDiyDom: divDom,
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom
            },
            data: {
                key: {
                    url: null  // 这里设置URL为空，防止点击后四处跳转
                }
            }
        };
        req("get", "menu/get/whole/tree.json").then(res => {
            nodes = res.data.root;
            let zTree = $("#zTree");
            // 这里在加载之前清空tree
            zTree.empty();
            $.fn.zTree.init(zTree, setting, nodes);
        })
    }

    // 页面渲染每一个菜单项的时候都会触发该方法，在渲染的时候动态修改他的Ico图标
    function divDom(id, node) {
        $("#" + node.tId + "_ico")
            .removeClass()
            .addClass(node.icon);
    }

    // 鼠标滑过菜单树时触发的添加方法
    function addHoverDom(id, node) {
        let spanId = node.tId + "_btnGrp";
        // 如果目标已经存在就没有添加的必要了，直接Return
        if ($("#" + spanId).length > 0)
            return;
        // 在html模板中为编辑，添加，删除这三个按钮分别设置了不同的class用于进行动态绑定事件
        let editBtn = "<a id='" + node.id + "' class='btn btn-info dropdown-toggle btn-xs m-editBtn'>&nbsp;&nbsp;<i class='fa fa-fw fa-edit rbg'></i></a>";
        let addBtn = "<a id='" + node.id + "' class='btn btn-info dropdown-toggle btn-xs m-addBtn'>&nbsp;&nbsp;<i class='fa fa-fw fa-plus rbg'></i></a>";
        let removeBtn = "<a id='" + node.id + "' username='" + node.name + "' class='btn btn-info dropdown-toggle btn-xs m-rmBtn'>&nbsp;&nbsp;<i class='fa fa-fw fa-times rbg'></i></a>";
        let btnGrp = "";
        switch ( node.level ) {
            case 1: {
                btnGrp += node.children.length === 0 ? removeBtn : "";
            }
            case 0: {
                btnGrp = editBtn + addBtn + btnGrp;
            } break;
            case 2: {
                btnGrp = editBtn + removeBtn;
            } break;
        }
        $("#" + node.tId + "_a").after("<span id='" + node.tId + "_btnGrp'>" + btnGrp + "</span>")
    }

    // 鼠标滑出菜单树时触发的移除方法
    function removeHoverDom(id, node) {
        $("#" + node.tId + "_btnGrp").remove();
    }

    // 【菜单添加按钮】绑定单击事件
    $("#zTree").on("click", ".m-addBtn", function () {
        // 获取当前点击的菜单的ID值存储在window中在接下来的添加中作为Pid
        window.pid = $(this).attr("id");
        // 打开添加的模态框并清空其中的值
        $("#addMenuDialog").modal("show");
    });

    // 【添加模态框】提交添加的事件
    $("#addMenuBtn").click(()=>{
        // 获取添加所需的所有参数封装为参数发起请求
        let name = $.trim($("#addMenuDialog input[name='name']").val());
        let url = $.trim($("#addMenuDialog input[name='url']").val());
        let icon = $("#addMenuDialog input[name='icon']:checked").val();
        let param = { name, url, icon, pid: window.pid };
        req("post", "menu/save.json", param).then(res=>{
            // 添加成功后弹出提示，关闭模态框重新加载菜单树
            layer.msg(res.msg);
            initTree();
            $("#addMenuDialog").modal("hide");
        })
    });

    // 【菜单编辑按钮】绑定单击事件
    $("#zTree").on("click", ".m-editBtn", function () {
        // 获取当前点击的菜单的ID值存储在window中在接下来的添加中作为Pid
        let id = $(this).attr("id");
        // 获取zTree对象通过id查询当前选中的菜单对象
        let zTree = $.fn.zTree.getZTreeObj("zTree");
        let node = zTree.getNodeByParam("id", id);
        // 打开模态框之前将数据追加到模态框中
        window.id = node.id;
        $("#editMenuDialog input[name='name']").val(node.name);
        $("#editMenuDialog input[name='url']").val(node.url);
        $("#editMenuDialog input[name='icon']").val([node.icon]);
        // 打开模态框
        $("#editMenuDialog").modal("show");
    });

    // 【编辑模态框】提交编辑的事件
    $("#menuEditBtn").click(()=>{
        // 拿到更新所需要的参数
        let id = window.id;
        let name = $("#editMenuDialog input[name='name']").val();
        let url = $("#editMenuDialog input[name='url']").val();
        let icon = $("#editMenuDialog input[name='icon']:checked").val();
        req("post", "menu/update.json", {id, name, url, icon}).then(res=>{
            layer.msg(res.msg);
            initTree();
            $("#editMenuDialog").modal("hide");
        });
        $("#editMenuDialog").modal("hide");
    });

    // 删除按钮的事件
    $("#zTree").on("click", ".m-rmBtn", function() {
        let id = $(this).attr("id");
        let name = $(this).attr("username");
        layer.confirm("你确定要删除【" + name + "】吗？", {title: "提示", btn: ["删除", "取消"]}, ()=>{
            req("post", "menu/delete.json", {id: id}).then(res=>{
                layer.msg(res.msg);
                initTree();
            })
        })
    });

    // 关闭模态框时清空其中的数据
    $('#addMenuDialog').on('hidden.bs.modal', e=>{
        $("#addMenuDialog input[name='name']").val("");
        $("#addMenuDialog input[name='url']").val("");
        $("#addMenuDialog input[name='icon']:checked").attr("checked",false);
    });

</script>
</html>